<template>
  <div class="home">
    <mt-header fixed title="智能选股">
      <mt-button icon="back" slot="left"></mt-button>
      <mt-button icon="search" slot="right" @click="toResearch"></mt-button>
    </mt-header>
    <div class="home-content">
      <div class="smart-pointers">
        <div class="header-title">
          <span class="fl vertical-line"></span><h2 class="fl top-title">智能指标</h2><span class="fl sub-title">智能信号,发掘先机</span>
        </div>
        <div class="devide-line"></div>
        <div class="super-wave"><img src="../assets/super_wave.png" alt="超级电波"></div>
      </div>
      <div class="devide-line"></div>
      <div class="devide-block"></div>
      <div class="factor-selection">
        <div class="header-title">
          <span class="fl vertical-line"></span><h2 class="fl top-title">因子选股</h2><span class="fl sub-title">因子叠加,自定义策略发现牛股</span>
        </div>
        <div class="devide-line"></div>
        <div class="sub-factor-new">
          <div class="sub-factor-header"><h3 class="sub-module-title fl">最新因子</h3><button class="fr">更多</button></div>
          <ul class="sub-factor-items">
            <li>共享单车</li>
            <li>乡村振兴</li>
            <li>成交额超500万</li>
            <li>租售同权</li>
            <li>长期稳定高Rip</li>
            <li>股东数量减少</li>
          </ul>
          <div class="devide-line"></div>
        </div>
        <div class="sub-factor-hot">
          <div class="sub-factor-header"><h3 class="sub-module-title fl">最热因子</h3><button class="fr">更多</button></div>
          <ul class="sub-factor-items">
            <li>共享单车</li>
            <li>乡村振兴</li>
            <li>成交额超500万</li>
            <li>租售同权</li>
            <li>长期稳定高Rip</li>
            <li>股东数量减少</li>
          </ul>
        </div>
        <div class="devide-line"></div>
        <div class="sub-factor-type">
          <ul class="sub-factor-items">
            <li>技术为大</li>
            <li>优选概念</li>
            <li>地域特色</li>
            <li>行业突出</li>
            <li>风格先行</li>
            <li>财务领先</li>
          </ul>
        </div>
      </div>
      <div class="devide-line"></div>
      <p class="declaration">● 免责声明:智能选股基于市场公开信息及股票信号识别聚合而成,不构成具体投资建议,请确保已完全理解其实际含义,避免因误解而导致与您的预期不一致,股市有风险,入市需谨慎.</p>
    </div>
    <mt-button type="default" class="myStrategy-btn">我的策略</mt-button>
  </div>
</template>

<script>
export default {
  name: 'home',
  methods: {
    toResearch () {
      console.log(this)
      this.$router.push({path: '/research'})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home{
  width:100%;
  margin-bottom:1.3rem;
}
/*home-content*/
.home-content{
  margin-top: 1.25rem;
  width: 100%;
  overflow: hidden;
  background-color: #fff;
}
.smart-pointers .super-wave{
  padding: 0.265625rem 0.40625rem;
}
.smart-pointers .super-wave img{
  width: 9.1875rem;
  height: 2.34375rem;
}
.factor-selection .sub-factor-new,.factor-selection .sub-factor-hot,.factor-selection .sub-factor-type{
  padding: 0 0.40625rem;
}
.declaration{
  padding: 0.265625rem 0.40625rem;
  background-color: #f7f7f7;
  color:#999999;
  text-align: left;
}
/*底部我的策略按钮*/
.myStrategy-btn{
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  border-radius: 0;
  height: 1.25rem;
  color:#af2434;
  background-color: #fff;
}
.myStrategy-btn .mint-button{
  font-size: 18px !important;
}
/*划分线*/
.devide-line{
  width: 100%;
  height: 1px;
  background-color: #dddddd;
  border-bottom:1px solid #f7f7f7;
}
.vertical-line{
  width: 5px;
  height: 0.546875rem;
  background-color: #af2434;
  display: inline-block;
  position: relative;
  top: 50%;
  margin-top:-0.2734rem;
}
.devide-block{
  height: 0.265625rem;
  width: 100%;
  background-color: #f7f7f7;
}
/*此页面公共样式*/
.header-title{
  height:1.03125rem;
  line-height:1.03125rem;
  overflow: hidden;
}
.top-title{
  display: inline-block;
  font-weight: 600;
  font-size: 14px;
  color: #333333;
  margin-left: 0.34375rem;
}
.sub-title{
  color:#999999;
  margin-left: 0.15625rem;
  line-height: 1.09375rem;
}
.sub-factor-header{
  overflow: hidden;
  height: 1.0625rem;
  line-height: 1.0625rem;
}
.sub-factor-header .sub-module-title{
  font-size: 14px;
  color:#999999;
}
.sub-factor-header button{
  border: none;
  background:none;
  color:#6192dd;
  height: 100%;
}
.sub-factor-items{
  overflow: hidden;
  margin-top: 6px;
}
.sub-factor-items li{
  width:2.875rem;
  height:0.640625rem;
  background-color: #f7f7f7;
  border-radius: 2px;
  line-height: 0.640625rem;
  font-size: 14px;
  color: #737373;
  float: left;
  text-overflow:ellipsis;
  white-space: nowrap;
  margin-bottom: 0.265625rem;
  margin-right: 0.28125rem;
  overflow: hidden;
  padding: 0 0.1875rem;
  box-sizing: border-box;
}
.sub-factor-type .sub-factor-items{
  margin:10px 0;
}
.sub-factor-type .sub-factor-items li{
  width: 2.8125rem;
  height:1.4375rem;
  line-height: 1.4375rem;
  font-size: 16px;
  color: #fff;
  text-align: center;
  overflow: hidden;
  margin-bottom: 0.265625rem;
  margin-right: 0.375rem;
  padding: 0;
}
.sub-factor-items li:nth-of-type(3n){
  margin-right: 0;
}

.sub-factor-type .sub-factor-items li:nth-of-type(1){
  background: url('../assets/sub-factor-type1.png') no-repeat center center;
  background-size:100% 100%; 
}
.sub-factor-type .sub-factor-items li:nth-of-type(2){
  background: url('../assets/sub-factor-type2.png') no-repeat center center;
  background-size:100% 100%; 
}
.sub-factor-type .sub-factor-items li:nth-of-type(3){
  background: url('../assets/sub-factor-type3.png') no-repeat center center;
  background-size:100% 100%; 
}
.sub-factor-type .sub-factor-items li:nth-of-type(4){
  background: url('../assets/sub-factor-type4.png') no-repeat center center;
  background-size:100% 100%; 
}
.sub-factor-type .sub-factor-items li:nth-of-type(5){
  background: url('../assets/sub-factor-type5.png') no-repeat center center;
  background-size:100% 100%; 
}
.sub-factor-type .sub-factor-items li:nth-of-type(6){
  background: url('../assets/sub-factor-type6.png') no-repeat center center;
  background-size:100% 100%; 
}
</style>
